Indicators, Validations, and Notifications: Pick the Correct Communication Option 狀態指示、驗證與通知

在互動設計中,系統無論是應用程式、網站還是硬體裝置(如智慧手錶、恆溫器等),都應透過適當的反饋讓使用者隨時瞭解系統狀態。確保系統狀態的可見性是介面設計的十大可用性原則之一。系統狀態資訊(如錯誤訊息、系統活動通知)能夠幫助使用者全面理解當前上下文,進而提升使用者體驗。

系統狀態傳達(Communicating System Status)驗證 (Validation)通知 (Notifications)指示器 (Indicators)
全域性 vs. 上下文與全域性系統事件或特定頁面元素相關上下文 (Contextual)全域性或上下文 (Global or Contextual)上下文 (Contextual)
被動 vs. 需要使用者操作被動顯示還是需要使用者採取操作需要操作 (Action required)需要操作或被動 (Action required or passive)被動 (Passive)
由使用者操作觸發 vs. 系統事件觸發使用者操作 (User action)系統事件 (System event)使用者操作或系統事件 (User action or system event)

系統狀態溝通方式

根據資訊的型別、緊急程度以及使用者是否需要採取行動來應對這些資訊的不同,系統狀態的溝通方式也應有所不同。常見的三種溝通方式包括:

這三種方式在產品設計中有時會被混用,但它們分別代表了不同的溝通手段,適用於不同的場景。理解它們之間的區別能夠幫助設計師在需要提供使用者反饋時選擇最合適的方式,從而提升系統的有效性與使用者滿意度。

3. 狀態指示(Indicators)

狀態指示是一種使頁面元素(如內容或使用者介面元件)突出的方式,以提示使用者該元素髮生了某些變化或存在某些特徵。狀態指示通常用於動態內容元素,吸引使用者注意到某個特定的資訊。

實現方式:狀態指示通常透過圖示、文字樣式變化(如粗體、顏色變化)或尺寸與動畫(如放大、震動)等方式來實現。

特性:

  • 上下文相關:狀態指示通常與某個特定的UI元素或內容相關,並且應顯示在該元素的附近。
  • 條件性顯示:狀態指示並非始終存在,而是根據某些條件變化而顯示或隱藏。例如,股票走勢的箭頭圖示會根據股票價格的漲跌而變化。
  • 被動性:狀態指示不要求使用者採取行動,而是用於傳遞附加資訊,如價格變化、庫存更新等。

使用場景:狀態指示常用於展示動態變化的資訊,如電子郵件列表中的未讀郵件標識、投資賬戶中價格大幅波動的股票顏色變化等。

Yelp(點評平臺)在搜尋結果中使用了紅色火焰圖示來表示某個餐館是“熱門新店”。這一狀態指示能夠引起使用者的關注,並傳達額外的資訊,而無需使用者採取進一步的操作。

4. 驗證訊息(Validations)

驗證訊息是與使用者輸入相關的錯誤提示資訊,用於告知使用者其輸入是否不完整或不正確。常見於表單填寫場景中,如電子商務系統中的姓名、賬單地址和信用卡資訊輸入錯誤提示。

特性:需要使用者採取行動:使用者必須根據驗證訊息的提示修正輸入內容,驗證訊息才能消失。上下文相關:驗證訊息通常與特定的使用者輸入區域相關,指出哪一項輸入存在問題。

設計要點:驗證訊息應遵循錯誤提示的最佳實踐,不僅僅指出問題,還應引導使用者如何修正問題。例如,避免只提示“欄位為空”,而是應提示“請輸入您的街道地址”,以更加禮貌和指導性的語氣來幫助使用者理解。

圖示與驗證結合使用:可以在驗證訊息旁邊新增圖示指示,進一步突出需要修正的輸入區域。

Bestbuy.com(百思買)在驗證使用者資訊時,不僅使用了明確的紅色錯誤提示來告知使用者具體問題,還在錯誤欄位旁邊新增了圖示,使使用者能夠更快地定位和理解錯誤所在。

5. 通知(Notifications)

通知是一種向使用者告知系統狀態變化或事件的訊息。通知通常並不直接與使用者的輸入或當前操作相關,而是用於告知系統的總體狀態變化或與使用者相關的事件(如訂單狀態更新、新訊息提醒)。

特性:

  • 非使用者觸發:通知不是由使用者的即時操作觸發,而是由系統事件引發(如應用更新、好友請求等)。
  • 提供重要事件的提醒:通知應傳達與使用者相關的重要事件或資訊。

型別:

  1. 需使用者採取行動的通知:此類通知提示使用者需要採取某種行動。例如,移動裝置電量不足的提醒會以彈窗形式出現,要求使用者及時充電。
  1. 被動通知:用於傳遞不需要使用者立即處理的資訊(如應用更新、廣告推送等)。被動通知通常以圖示、標識等非幹擾性方式呈現。

設計注意點:由於通知可能在使用者執行其他操作時出現,因此設計時應確保通知內容足夠簡潔、上下文明確,幷包含使用者理解通知所需的背景資訊。

Adobe Creative Cloud使用了非幹擾性通知來提示使用者有可用的應用更新。該通知在螢幕上顯示幾秒後自動消失,使用者無需採取行動即可繼續操作。

6. 選擇正確的溝通方式

使用不當的溝通方式可能會對使用者體驗產生負面影響。以下幾點可以幫助你在設計時做出最佳選擇:

狀態指示(Indicators):用於補充動態內容或UI元素的資訊提示,不要求使用者採取行動。例如,Yelp使用綠色標籤表示“限時優惠”適用於當前商家。

驗證訊息(Validations):用於及時告知使用者輸入錯誤,並提供修正方向。驗證訊息與使用者當前操作直接相關,應放置在錯誤輸入的附近。

通知(Notifications):用於告知使用者與當前操作無關的系統事件,或系統狀態的整體變化。通知可以是被動的(如新增商品的庫存提醒),也可以是主動的(如需要使用者採取行動的警告資訊)。

優衣庫在其產品詳情頁面上使用了一個情境通知,以引起使用者對幫助找到合適尺碼的工具的注意。這個通知不要求使用者採取行動就能與頁面互動。你可以點選X按鈕關閉它,但在一段時間不活動後它最終會自動消失。

如何選擇合適的方式

是否需要使用者立即注意:如果需要使用者立即關注並採取行動(如輸入錯誤),則應使用驗證訊息或需使用者操作的通知。

資訊是否與當前上下文相關:若資訊僅作為補充(如動態資料的變化),狀態指示是更好的選擇。

資訊傳遞的緊急程度:較為緊急的系統狀態或事件應使用通知,並以彈窗、橫幅等形式突出顯示。

Mac作業系統使用通知來告知使用者配件裝置需要充電。使用者可以透過選擇忽略或點選通知外的任何地方來明確地從螢幕上關閉它。這是一個需要使用者採取行動的侵入性通知。

Adobe Creative Cloud使用了一種非侵入式的被動通知來告知使用者有可用的應用程式更新。這個通知在螢幕上顯示幾秒鐘後就消失了。使用者無需對此採取任何行動。

Visual Comfort and Co 在產品詳情頁面頂部使用非侵入式被動通知,提示商品已新增到購物車。然而,由於通知位置遠離"新增到購物車"按鈕,使用者可能會忽視它。這可能導致重複新增商品或中斷購物流程以確認。通知不需使用者操作,但會持續顯示直到關閉。儘管如此,其不顯眼的位置不會干擾使用者體驗。

Mango.com上,當使用者將商品新增到購物車時,會出現一個比 Visual Comfort and Co 更具侵入性的通知。佔據螢幕的一部分減少了使用者可能看不到反饋的風險。這種通知是介於被動通知和需要操作通知之間的一種混合體。它是使用者操作的直接結果,因此要求使用者採取行動來確認它就顯得不那麼重要了。儘管它確實有可以採取行動的按鈕,但如果使用者點選任何地方或繼續與頁面互動,通知就會自行消失。

結論

理解狀態指示、驗證訊息和通知三者的區別,並在合適的場景中選擇正確的溝通方式,能夠幫助你為使用者建立一致的溝通機制。透過評估資訊的型別、緊急程度和使用者需要採取的操作,我們可以確定最有效的溝通工具,從而提升系統的可用性和使用者體驗。